<template>
    <!--图标样式-->
    <link rel="stylesheet" type="text/css" href="/assets/fonts/font-awesome-4.7.0/css/font-awesome.min.css">

    <!--布局框架-->
    <link rel="stylesheet" type="text/css" href="/assets/css/util.css">

    <!--主要样式-->
    <link rel="stylesheet" type="text/css" href="/assets/css/main.css">

    <div class="limiter">
        <div class="container-login100" style="background-image: url('/assets/images/img-01.jpg');">
            <div class="wrap-login100 p-t-190 p-b-30">
                <van-form @submit="onSubmit" class="login100-form validate-form">
                    <div class="login100-form-avatar">
                        <img src="/assets/images/avatar-01.jpg" alt="AVATAR">
                    </div>

                    <span class="login100-form-title p-t-20 p-b-45">Hello</span>

                    <div class="wrap-input100 validate-input m-b-10" data-validate="请输入手机号">
                        <input class="input100" type="text" v-model="mobile" placeholder="手机号" autocomplete="off">
                        <span class="focus-input100"></span>
                        <span class="symbol-input100">
                            <i class="fa fa-user"></i>
                        </span>
                    </div>

                    <div class="wrap-input100 validate-input m-b-10" data-validate="请输入密码">
                        <input class="input100" type="password" v-model="password" placeholder="密码">
                        <span class="focus-input100"></span>
                        <span class="symbol-input100">
                            <i class="fa fa-lock"></i>
                        </span>
                    </div>

                    <div class="container-login100-form-btn p-t-10">
                        <button class="login100-form-btn">注 册</button>
                    </div>

                    <div class="text-center w-full p-t-35">
                        <router-link class="txt1" to="/business/base/login">
                            立即登录
                            <i class="fa fa-long-arrow-right"></i>
                        </router-link>
                    </div>
                </van-form>
            </div>
        </div>
    </div>
</template>

<script setup>
// 定义变量
const mobile = ref('13300000000');
const password = ref('123');

// 全局代理 => this
const { proxy } = getCurrentInstance();

// 表单提交事件
const onSubmit = async (values) => {

    if(!mobile.value.trim())
    {
        proxy.$warnNotify('请输入手机号');

        return false;
    }

    let mobileReg = /^1[3-9]\d{9}$/;

    if(!mobileReg.test(mobile.value))
    {
        proxy.$warnNotify('请输入正确手机号');

        return false;
    }

    if(!password.value.trim())
    {
        proxy.$warnNotify('请输入密码');

        return false;
    }

    // 封装数据
    let data = {
        mobile:mobile.value,
        password:password.value
    }

    let result = await proxy.$post({
        url:'business/base/register',
        params:data
    })

    if(result.code === 1)
    {
        proxy.$successNotify({
            message:result.msg,
            onClose:() => {
                // 路由跳转
                proxy.$router.push('/business/base/login');
            }
        });

        return false;
        
    }else{
        proxy.$warnNotify(result.msg);

        return false;
    }
}
</script>